<template>
  <div>
    <!-- <van-nav-bar title="玻璃权益卡" /> -->
    <div class="wrap">
      <div class="base-info">
        基础信息
        <span class="tip">（如获取信息错误请手动填写）</span>
      </div>
      <van-cell-group inset class="custom-cell">
        <van-field
          style="font-size: 15px"
          v-model="form.name"
          label="姓名"
          placeholder="请填写姓名"
          input-align="right"
        />
        <van-field
          style="font-size: 15px"
          v-model="form.phone"
          label="联系方式"
          placeholder="请填写联系方式"
          input-align="right"
        />
      </van-cell-group>
      <div class="base-info" v-if="isBaseInfo">
        资料信息
        <span class="tip">（上传验证后自动获取基础信息）</span>
      </div>
      <div v-if="isBaseInfo">
        <van-uploader :after-read="afterRead" v-if="!form.photo">
          <div class="upload-wrap">
            <div>
              <div class="pitcure">
                <img style="width: 70px; height: 70px" :src="CerameSvg" />
              </div>
              <div>请上传行驶证</div>
            </div>
          </div>
        </van-uploader>
        <div v-else>
          <img class="photo-wrap" :src="form.photo" alt="" />
        </div>
      </div>
      <div style="margin-top: 20px">
        <van-button
          type="primary"
          color="#FBB215"
          :disabled="!form.name || !form.phone"
          @click="handleSubmitInfo"
          round
          block
          >{{ isBaseInfo ? "确定" : "查询" }}</van-button
        >
      </div>
    </div>
   <!--  <div class="agreement">隐私协议</div> -->
  </div>
</template>

<script lang="ts" setup>
//@ts-nocheck
import CerameSvg from "@/assets/cerame.svg";
import { ref, reactive } from "vue";
import {
  uploadAvatar,
  getCarInfo,
  getOwnerInfo,
  submitInfo,
} from "@/apis/index";
import { showToast, showFailToast } from "vant";
import { useRouter } from "vue-router";

const form = reactive({
  name: "",
  phone: "",
  photo: "",
});
const isBaseInfo = ref(false);
//行驶证数据
const carInfo = ref({});
const router = useRouter();

const afterRead = async (file) => {
  const fileInfo = file.file;
  if (fileInfo.size > 1 * 1024 * 1024) {
    showFailToast("上传图片不能大于1MB");
    return;
  }
  showToast("行驶证上传中，请耐心等待~");
  const res = await getCarInfo({ file: fileInfo });
  const { constownerAddress, ownerName, plateNum, vin } = res.data;
  form.name = ownerName;
  // form.phone = res.data.ownerPhone;
  form.photo = file.content;
  carInfo.value = {
    constownerAddress,
    plateNum,
    vin,
  };
};
const handleSubmitInfo = async () => {
  const res = await getOwnerInfo({ name: form.name, phone: form.phone });
  let obj = {};
  if (res.data) {
    Object.assign(obj, res.data);
  } else if (Object.keys(carInfo.value).length) {
    Object.assign(obj, carInfo.value);
  } else {
    isBaseInfo.value = true;
    return;
  }
  obj.ownerName = form.name;
  obj.ownerPhone = form.phone;
  const res2 = await submitInfo(obj);
  const { id, ownerName, ownerPhone, plateNum, vin, status, policyDate } =
    res2.data;
  if (status === 1) {
    return router.push({
      path: "/mobile/resultInfo",
      query: {
        id,
        policyDate,
      },
    });
  }
  if (status === 0) {
    return showFailToast("等待审核");
  }
  router.push({
    path: "/mobile/carInfo",
    query: {
      ownerName,
      ownerPhone,
      plateNum,
      vin,
    },
  });
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 0 20px;
  box-sizing: border-box;

  // padding-top: 20px;
  .base-info {
    margin: 20px 0;
  }

  .custom-cell {
    margin: 0;
  }

  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 0px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .photo-wrap {
    width: calc(100vw - 40px);
    //height: 200px;
  }

  .upload-wrap {
    width: calc(100vw - 40px);
    height: 200px;
    background: #333333;
    opacity: 0.6;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    .pitcure {
      text-align: center;
      font-size: 14px;
    }
  }
}
.agreement {
  position: fixed;
  bottom: 0;
  text-align: center;
}
</style>
